import React from 'react';
import { View, Image } from "@tarojs/components";
import { GStyleSheet } from "@/utils/DarkMode";
import Modal from './index';

const loadingImage = 'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/375869/media/loading_1667448381575.gif';

const dstyles = GStyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: 'rgba(0,0,0,0.6)',
    borderRadius: 10,
    flexDirection: 'column',
  },
  image: {
    width: 120,
    height: 120,
  },
});

/**
 * 设备不在线时的弹窗
 */
class DeviceLoading extends React.Component<{ visible: boolean }> {
  render() {
    const { visible } = this.props;
    const styles = dstyles.style;
    return (
      <Modal visible={visible} mask={false}>
        <View style={styles.container} className='centerFlex'>
          <Image src={loadingImage} style={styles.image} />
        </View>
      </Modal>
    );
  }
}

export default DeviceLoading;
